<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品介绍</title>
    <link type="text/css" rel="stylesheet" href="style/reset.css">
    <link type="text/css" rel="stylesheet" href="style/main.css">
</head>
<body class="grey">
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
                欢迎来到慕课网!<a href="#">[登陆]</a><a href="#">[免费注册]</a>
            </div>
        </div>
    </div>
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo fl">
                <a href="#"><img src="images/icon/logo.png" alt="慕课网"></a>
            </div>
            <div class="search_box fl">
                <input type="text" class="search_input fl">
                <input type="button" value="搜 索" class="search_btn fr">
            </div>
            <div class="shopCar fr">
                <span class="shopText">购物车</span>
                <span class="shopNum">0</span>
            </div>
        </div>
    </div>
    <div class="navBox">
        <div class="comWidth">
            <div class="shopClass fl">
                <h3>全部商品分类<i></i></h3>

                <div class="shopClass_show hide">
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                </div>
            </div>
            <ul class="nav fl">
                <li><a href="#" class="active">数码城</a></li>
                <li><a href="#">天黑黑</a></li>
                <li><a href="#">团购</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">二手特卖</a></li>
                <li><a href="#">唯品会</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- banner  -->
<div class="userPosition comWidth">
    <strong><a href="#">首页</a></strong>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="#">平板电脑</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="#">Apple苹果</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <em>MD531CH/A</em>
</div>
<div class="description_info comWidth">
    <div class="description clearfix">
        <div class="leftArea">
            <div class="description_imgs">
                <div class="big">
                    <img src="images/icon/des_big.png" alt="logo">
                </div>
                <ul class="des_smimg clearfix">
                    <li><a href="#"><img src="images/icon/des_sm_01.png" alt="" class="active"></a></li>
                    <li><a href="#"><img src="images/icon/des_sm_02.png" alt=""></a></li>
                    <li><a href="#"><img src="images/icon/des_sm_03.png" alt=""></a></li>
                    <li><a href="#"><img src="images/icon/des_sm_04.png" alt=""></a></li>
                    <li><a href="#"><img src="images/icon/des_sm_05.png" alt=""></a></li>
                </ul>
            </div>
        </div>
        <div class="rightArea">
            <div class="des_content">
                <h3 class="des_content_title">招商银行一卡通(工资卡)问题,一种办卡时要存1000</h3>
                <div class="dl clearfix">
                    <div class="dt">慕课价</div>
                    <div class="dd"><span class="des_money"><em>￥999.00</em></span></div>
                </div>
                <div class="dl clearfix">
                    <div class="dt">优惠</div>
                    <div class="dd"><span class="hg"><i class="hg_icon">优惠购</i><em>购ipad加价优惠购配件或USB充电插座</em></span></div>
                </div>
                <div class="des_position">
                    <div class="dl clearfix">
                        <div class="dt">送到</div>
                        <div class="dd clearfix">
                            <div class="select">
                                <h3>海淀区五环内</h3>
                                <span></span>
                                <ul class="show_select">
                                    <li>上地</li>
                                    <li>龙泽</li>
                                    <li>五道口</li>
                                </ul>
                            </div>
                            <span class="theGoods">有货，可当日送货</span>
                        </div>
                    </div>

                    <div class="dl clearfix">
                        <div class="dt colorSelect">选择颜色</div>
                        <div class="dd clearfix">
                           <div class="des_item des_item_active">
                               WIFI16 GB
                           </div>
                            <div class="des_item">
                                WIFI8 GB
                            </div>
                            <div class="des_item">
                                WIFI4 GB
                            </div>
                        </div>
                    </div>

                    <div class="dl clearfix">
                        <div class="dt des_select_more">选择版本</div>
                        <div class="dd clearfix">
                            <div class="des_item des_item_sm">
                                WIFI16 GB + 3GB
                            </div>
                            <div class="des_item des_item_sm des_item_active">
                                WIFI8 GB + 2GB
                            </div>
                            <div class="des_item des_item_sm">
                                WIFI4 GB + 1GB
                            </div>
                            <div class="des_item des_item_sm">
                                WIFI8 GB + 2GB
                            </div>
                            <div class="des_item des_item_sm">
                                WIFI4 GB + 1GB
                            </div>
                        </div>
                    </div>
                    <div class="dl">
                        <div class="dt des_num">数量</div>
                        <div class="dd clearfix">
                           <div class="des_number">
                               <div class="reduction">-</div>
                               <div class="des_input">
                                   <input type="text">
                               </div>
                               <div class="plus">+</div>
                           </div>
                           <span class="xg">限购<em>9</em>件</span>
                        </div>
                    </div>
                </div>
                <div class="des_select">
                    已选择 <span>"白色|WIFI 16G"</span>
                </div>
                <div class="shop_buy">
                    <a href="#" class="shopping_btn"></a>
                    <span class="line"></span>
                    <a href="#" class="buy_btn"></a>
                </div>
                <div class="notes">
                    注意:此商品不提供普通发票,不提供增值税发票。
                </div>
            </div>
        </div>
    </div>
</div>

<div class="hr_15"></div>
<div class="des_info comWidth clearfix">
    <div class="leftArea">
        <div class="recommend">
            <h3 class="title">同价位</h3>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">￥888</p>
                </div>
            </div>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">￥888</p>
                </div>
            </div>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">￥888</p>
                </div>
            </div>
        </div>
        <div class="hr_15"></div>
        <div class="recommend">
            <h3 class="title">看了最终买</h3>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">￥888</p>
                </div>
            </div>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">￥888</p>
                </div>
            </div>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">￥888</p>
                </div>
            </div>
        </div>
    </div>
    <div class="rightArea">
        <div class="des_infoContent">
            <ul class="des_title">
                <li class="active"><span class="left">产品介绍</span></li>
                <li><span class="right">商品评价(18782)</span></li>
            </ul>
            <div class="ad">
                <a href="#"><img src="images/icon/ad.png" alt=""></a>
            </div>
            <div class="info_text">
                <div class="info_title">
                    <h3>强烈推荐</h3><h4>货比三家 还选</h4>
                </div>
                <p>12月18日，由张家口市人民政府主办，张家口市体育局承办的“大好河山·激情张家口”首届冰雪季在河北省高原训练基地长城岭雪场开幕。这是2022年冬奥会正式进入筹办阶段后，张家口市首次举办的大规模的群众性冰雪活动。
                </p>
                <div class="hr_45"></div>

                <div class="info_title">
                    <h3>精美图片</h3>
                </div>
                <p>玛莎拉蒂(中国)汽车贸易有限公司召回GranTurismo汽车 日前，玛莎拉蒂(中国)汽车贸易有限公司向国家质检总局备案了召回计划，决定自2015年12月11日起...</p>
                <div class="hr_45"></div>
                <img src="images/icon/pad.png" class="center">
            </div>
        </div>
        <div class="hr_15"></div>
        <div class="des_infoContent">
            <h3 class="shopDes">商品评价</h3>
            <div class="score_box clearfix">
                <div class="score">
                    <span>4.7</span><em>分</em>
                </div>
                <div class="score_speed">
                    <ul class="score_speed_text">
                       <li class="speed_01">非常不满意</li>
                       <li class="speed_02">不满意</li>
                       <li class="speed_03">一般</li>
                       <li class="speed_04">满意</li>
                       <li>非常满意</li>
                    </ul>
                    <div class="score_num">
                        4.7<i></i>
                    </div>
                    <p>共18939位慕课网友参与评分</p>
                </div>
            </div>
            <div class="review_tab">
                <ul class="review fl">
                    <li><a href="#" class="active">全部</a></li>
                    <li><a href="#">满意（3212）</a></li>
                    <li><a href="#">不满意(345)</a></li>
                    <li><a href="#">一般(198)</a></li>
                </ul>
                <div class="review_sort fr">
                    <a href="#" class="review_time">时间排序</a>
                    <a href="#" class="review_recommend">推荐排序</a>
                </div>
            </div>
            <div class="review_listBox">
                <div class="review_list clearfix">
                    <div class="review_userHead fl">
                        <div class="review_user">
                            <img src="images/icon/user_header.png" alt="logo">
                            <p>61***49</p>
                            <p>金色会员</p>
                        </div>
                    </div>
                    <div class="review_count">
                        <div class="review_t clearfix">
                            <div class="starsBox fl">
                                <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                            </div>
                            <span class="stars_text fl">5分 满意</span>
                        </div>
                        <p>挺不错的，信赖慕课</p>
                        <p><a href="#" class="ding">顶(129)</a><a href="#" class="cai">踩(29)</a></p>
                    </div>
                </div>
                <div class="review_list clearfix">
                    <div class="review_userHead fl">
                        <div class="review_user">
                            <img src="images/icon/user_header.png" alt="logo">
                            <p>61***49</p>
                            <p>金色会员</p>
                        </div>
                    </div>
                    <div class="review_count">
                        <div class="review_t clearfix">
                            <div class="starsBox fl">
                                <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
                            </div>
                            <span class="stars_text fl">5分 满意</span>
                        </div>
                        <p>挺不错的，信赖慕课</p>
                        <p><a href="#" class="ding">顶(129)</a><a href="#" class="cai">踩(29)</a></p>
                    </div>
                </div>
            </div>
            <div class="hr_25"></div>
        </div>
    </div>
</div>
<div class="hr_25"></div>
<!-- 底部 -->
<div class="footer">
    <p><a href="#">慕课简介</a><i>|</i><a href="#">慕课公告</a><i>|</i><a href="#">招贤纳士</a><i>|</i><a
            href="#">联系我们</a><i>|</i><a href="#">客服热线:0722-4818111</a></p>

    <p>关于我们常见问题反馈意见全站地图京ICP证030173号</p>

    <p class="web"><a href="#"><img src="images/icon/logo.png" alt="logo"></a><a href="#"><img src="images/icon/logo.png"
                                                                                   alt="logo"></a><a href="#"><img
            src="images/icon/logo.png" alt="logo"></a><a href="#"><img src="images/icon/logo.png" alt="logo"></a></p>
</div>
</body>
</html>